<template>
    <div :style="{
        height: '100vh',
        overflow: 'hidden',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',

        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="项目名称" name="name">
                            <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="项目编号" name="code">
                            <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="商务负责人" name="director">
                            <a-input v-model:value="searchFormState.director" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="6" v-show="advanced">
                        <a-form-item label="项目进度" name="progress">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.progress"
                                :options="progressOptions"></a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                    </a-row>
            </a-form>
        
        </a-card> <a-card :bordered="false" class="mb-2">
            <s-table ref="tableRef" tableLayout="fixed" :data="loadData" bordered :row-key="(record) => record.id"
                :tool-config="toolConfig" :columns="columns" class="mb-2">
                
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                </template>
            </s-table>
        </a-card>

    </div>
</template>

<script setup name="receivableMeetSale">
import { roles } from '@/utils/constants.js'
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()

// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const searchFormState = ref({
   
})
const reset = () => {
    searchFormState.value = {}
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },
    {
        title: '年份',
        dataIndex: 'year',
        key: 'year',
    },
    {
        title: '业务类型',
        dataIndex: 'businessType',
        key: 'businessType'
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        key: 'projectName'
    },
    {
        title: '客户名称',
        dataIndex: 'customerName',
        key: 'customerName'
    },
    {
        title: '部门名称 ',
        dataIndex: 'departmentName',
        key: 'departmentName'
    },
    {
        title: '项目经理 ',
        dataIndex: 'manager',
        key: 'manager'
    },
    {
        title: '结算金额',
        dataIndex: 'settlementAmount',
        Key: "settlementAmount"
    },
    {
        title: '收款金额 ',
        dataIndex: 'receivedAmount',
        Key: 'receivedAmount '
    },
    {
        title: "回款率",
        dataIndex: "collectionRate",
        Key: "collectionRate"
    },
    {
        title: "应收金额",
        dataIndex: "receivableAmount",
        Key: "receivableAmount"
    },
    {
        title: "产值 ",
        dataIndex: "outputValue",
        Key: "outputValue"
    },
    {
        title: "合同资产",
        dataIndex: "contractAsset",
        KeY: "contractAsset"
    },
    {
        title: "合同负债 ",
        dataIndex: "contractLiability",
        KeY: "contractLiability "
    }
]

const loadData = (parameter) => {

    var result = {
        "code": 200,
        "msg": "操作成功",
        "data": {
            "records": [
                {
                    index: 1,
                    year: 2020,
                    businessType: 'IT服务',
                    projectName: '企业网站建设',
                    customerName: 'ABC公司',
                    departmentName: '技术部',
                    manager: '张三',
                    settlementAmount: 100000,
                    receivedAmount: 50000,
                    collectionRate: 50,
                    receivableAmount: 50000,
                    outputValue: 200000,
                    contractAsset: 1000000,
                    contractLiability: 500000
                },
                {
                    index: 2,
                    year: 2021,
                    businessType: "互联网服务",
                    projectName: "APP开发",
                    customerName: "DEF有限公司",
                    departmentName: '市场部门',
                    manager: '李四',
                    settlementAmount: 80000,
                    receivedAmount: 40000,
                    collectionRate: 50,
                    receivableAmount: 40000,
                    outputValue: 150000,
                    contractAsset: 700000,
                    contractLiability: 300000
                },
                {
                    index: 3,
                    year: 2019,
                    businessType: "IT咨询",
                    projectName: "信息化规划",
                    customerName: "GHI集团有限公司",
                    departmentName: '财务部门',
                    manager: '王五',
                    settlementAmount: 120000,
                    receivedAmount: 80000,
                    collectionRate: 67,
                    receivableAmount: 40000,
                    outputValue: 180000,
                    contractAsset: 1200000,
                    contractLiability: 600000
                }
            ],
            "total": 1,
            "size": 20,
            "current": 1,
            "orders": [],
            "optimizeCountSql": true,
            "searchCount": true,
            "maxLimit": null,
            "countId": null,
            "pages": 1
        }
    }
    return new Promise((resolve) => {
        return resolve(result.data)
    })
}
loadData({}).then(res => {

    console.log("load data", res)
})
const refresh = (pId) => {
    console.log("fatch proId", pId)
}
// 重置表单,且设置默认值
const resetForm = () => {
    searchFormState.value.name = ""
    searchFormState.value.owner = ""
    searchFormState.value.progress = 0
    searchFormState.value.proNumber = ""
}

</script>
<style scoped></style>
